<template>
<div class="app-container calendar-list-container">
  <div class="filter-container">
    <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="订单号" v-model="listQuery.orderSn"> </el-input>
    <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="收货人" v-model="listQuery.deliName"> </el-input>
    <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="收货人电话" v-model="listQuery.deliTel"> </el-input>
    <el-date-picker class="filter-item" v-model="dateRange" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" placeholder="下单时间">
    </el-date-picker>
       <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="营销代码" v-model="listQuery.marketCode"> </el-input>
    <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
  </div>
  <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
    <el-table-column align="center" label="订单号" min-width="10%"> <template scope="scope">
          <span>{{scope.row.orderSn}}</span>
        </template> </el-table-column>
    <el-table-column min-width="10%" align="center" label="商家"> <template scope="scope">
        <span>{{scope.row.shopName}}</span>
      </template> </el-table-column>
    <el-table-column min-width="10%" align="center" label="收货人名称"> <template scope="scope">
        <span>{{scope.row.deliName}}</span>
      </template> </el-table-column>
    <el-table-column min-width="10%" align="center" label="收货人电话"> <template scope="scope">
            <span>{{scope.row.deliTel}}</span>
          </template> </el-table-column>
    <el-table-column min-width="10%" align="center" label="收货地址"> <template scope="scope">
            <span>{{scope.row.deliAddr}}</span>
          </template> </el-table-column>
    <el-table-column min-width="10%" align="center" label="商品总价"> <template scope="scope">
            <span>{{scope.row.productAmount | currency('￥')}}</span>
          </template> </el-table-column>
    <el-table-column min-width="10%" align="center" label="下单时间"> <template scope="scope">
            <span>{{scope.row.createTime}}</span>
          </template> </el-table-column>
    <el-table-column min-width="10%" align="center" label="订单状态"> <template scope="scope">
            <span>{{scope.row.orderStatusName}}</span>
          </template> </el-table-column>
    <el-table-column min-width="10%" align="center" label="支付状态"> <template scope="scope">
            <span>{{scope.row.payStatusName}}</span>
          </template> </el-table-column>
    <el-table-column min-width="10%" align="center" label="配送状态"> <template scope="scope">
            <span>{{scope.row.logisticsStatusName}}</span>
          </template> </el-table-column>
    <el-table-column min-width="10%" align="center" label="营销代码"> <template scope="scope">
            <span>{{scope.row.marketCode}}</span>
          </template> </el-table-column>
    <el-table-column align="center" label="操作" min-width="20%"> <template scope="scope">
        <el-button size="small" type="success" @click="handleDetail(scope.row)">查看详情
        </el-button>
        <el-button v-if="orderManager_btn_cancel && scope.row.payStatus === 0" size="small" type="success" @click="handleCancel(scope.row)">取消订单
        </el-button>
        <el-button v-if="orderManager_btn_send && scope.row.payStatus === 2 && scope.row.logisticsStatus === 0 && scope.row.orderStatus === 2" size="small" type="success" @click="handleSend(scope.row)">发货
        </el-button>
      </template> </el-table-column>
  </el-table>
  <div v-show="!listLoading" class="pagination-container">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNo" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
  </div>
  <el-dialog :title="cancelDialogTitle" :visible.sync="cancelDialogFormVisible" width="20%">
    <el-form :model="cancelForm" :rules="rules" ref="cancelForm" label-width="0px">
      <el-form-item prop="cancelReason">
        <el-select v-model="cancelForm.cancelReason" placeholder="请选择一个取消订单理由" width="300">
          <el-option v-for="item in  cancelReasonOptions" :key="item.label" :label="item.label" :value="item.label"> </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel('cancelForm')">取 消</el-button>
      <el-button type="primary" @click="updateCancel('cancelForm')">确 定</el-button>
    </div>
  </el-dialog>

  <el-dialog :title="sendDialogTitle" :visible.sync="sendDialogFormVisible" @close="closeSendDialog">
    <el-form :model="sendForm" :rules="rules" ref="sendForm" label-width="100px">
      <el-table :key='sendTableKey' :data="sendForm.items" v-loading.body="sendListLoading" border fit highlight-current-row style="width: 100%">
        <el-table-column align="center" label="商品" width="325"> <template scope="scope">
          <span>{{scope.row.title}}</span>
        </template> </el-table-column>
        <el-table-column align="center" label="数量" width="200"> <template scope="scope">
          <span>{{scope.row.productNum}}</span>
        </template> </el-table-column>
        <el-table-column align="center" label="状态" width="200">
          <span>未发货</span>
        </el-table-column>
      </el-table>
      <el-row class="el-row-margin">
        <el-col :span="4"><label>收货信息</label></el-col>
        <el-col :span="16">
          <el-row>
            <el-col :span="4"><span>配送方式</span></el-col>
            <el-col :span="16">
              <span>快递</span>
            </el-col>
          </el-row>
          <el-row class="el-row-margin10">
            <el-col :span="4"><span>收货人</span></el-col>
            <el-col :span="16"><span>{{sendForm.deliName}}  {{sendForm.deliTel}}</span></el-col>
          </el-row>
          <el-row class="el-row-margin10">
            <el-col :span="4"><span>收货地址</span></el-col>
            <el-col :span="16"><span>{{sendForm.deliAddr}}</span></el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="el-row-margin">
        <el-col :span="4"><label>收货方式</label></el-col>
        <el-col :span="16">
          <el-row>
            <el-col>
              <el-form-item class="marginLeft100">
                <el-radio-group class="filter-item" v-model="sendForm.logisticsType" @change="changeLogisticsType">
                  <el-radio :label="1">自己联系快递</el-radio>
                  <el-radio :label="2">无需物流</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="16" class="marginLeft10" v-if="logisticsCompanyVisible">
              <el-form-item label="物流公司:">
                <el-select class="filter-item" v-model="sendForm.logisticsCompany" placeholder="请选择物流公司" @visible-change="$forceUpdate()">
                  <el-option v-for="item in  picklistOptions" :key="item.picklistValue" :label="item.picklistText" :value="item.picklistValue"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="快递单号:">
                <el-input v-model="sendForm.logisticsInt" placeholder="请输入快递单号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelSend('sendForm')">取 消</el-button>
      <el-button type="primary" @click="updateSend('sendForm')">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import {
  page,
  getObj,
  putObj,
  sendObj
} from 'api/shop/order/order/index';
import { mapGetters } from 'vuex';
import { getToken } from 'utils/auth';
import {getPicklist} from 'api/param/picklist/index';
import {currency} from '@/utils/index';
export default {
  name: 'allOrder',
  data() {
    return {
      cancelForm: {
        orderSn: undefined,
        orderStatus:-2,
        cancelReason: undefined
      },
      sendForm: {
        orderSn: undefined,
        orderStatus: 4,
        logisticsType:undefined,
        logisticsStatus:3,
        logisticsCompany:'',
        logisticsInt:undefined,
        sendTime:new Date(),
        items:null,
        deliName:undefined,
        deliTel:undefined,
        deliAddr:undefined
      },
      rules: {
        cancelReason:[
          {
            required: true,
            message: '请选择一个取消订单理由',
            trigger: 'change'
          }
        ]
      },
      list: null,
      total: null,
      listLoading: true,
      sendListLoading:true,
      dateRange : null,
      listQuery: {
        pageNo: 1,
        pageSize: 20,
        orderSn: undefined,
        searchType:0,
        startTime : undefined,
        endTime : undefined,
        deliName:undefined,
        deliTel:undefined,
        marketCode:undefined
      },
      cancelDialogFormVisible: false,
      sendDialogFormVisible:false,
      logisticsCompanyVisible:true,
      orderManager_btn_cancel: false,
      orderManager_btn_detail: false,
      orderManager_btn_send: false,
      cancelDialogTitle: '取消订单',
      sendDialogTitle:'订单发货',
      picklistOptions:[],
      picklistCode: 'logisticsComName',
      cancelReasonOptions:[
        {label: '无法联系买家'},
        {label: '买家误拍或重拍了'},
        {label: '买家无诚意完成交易'},
        {label: '已通过银行线下汇款'},
        {label: '已通过同城见面交易'},
        {label: '已通过货到付款交易'},
        {label: '已通过网上银行直接汇款'},
        {label: '已经缺货无法交易'}
      ],
      tableKey: 0,
      sendTableKey:0
    }
  },
  created() {
    this.getList();
    this.getPicklist();
    this.orderManager_btn_cancel = this.elements['orderManager:btn_cancel'];
    this.orderManager_btn_detail = this.elements['orderManager:btn_detail'];
    this.orderManager_btn_send = this.elements['orderManager:btn_send'];
  },
  filters:{
    currency: currency
  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  methods: {
    getList() {
      this.listLoading = true;
      page(this.listQuery)
        .then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
          this.listLoading = false;
        })
    },
    getPicklist() {
      getPicklist(this.picklistCode)
        .then(response => {
          this.picklistOptions = response.data;
        })
    },
    handleFilter() {
      if(this.dateRange != null){
        this.listQuery.startTime = this.dateRange[0];
        this.listQuery.endTime = this.dateRange[1];
      }
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val;
      this.getList();
    },
    handleCancel(row) {
      this.resetCancelTemp();
      this.cancelForm.orderSn = row.orderSn;
      this.cancelDialogFormVisible = true;
    },
    handleSend(row) {
      this.resetSendTemp();
      this.sendListLoading = true;
      this.sendDialogFormVisible = true;
       getObj(row.orderSn)
        .then(response => {
          this.sendForm.orderSn = row.orderSn;
          this.sendForm = response.data;
          this.sendListLoading = false;
        });
    },
    handleDetail(row) {
      this.$router.push({path: '/shop/order/orderDetail',query: {orderSn: row.orderSn}});
    },
    cancel(formName) {
      this.cancelDialogFormVisible = false;
      this.$refs[formName].resetFields();
    },
    cancelSend(formName) {
      this.sendDialogFormVisible = false;
      this.sendListLoading = false;
      this.$refs[formName].resetFields();
    },
    updateCancel(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          this.cancelDialogFormVisible = false;
          putObj(this.cancelForm.orderSn, this.cancelForm).then(() => {
            this.cancelDialogFormVisible = false;
            this.getList();
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            });
          });
        } else {
          return false;
        }
      });
    },
    updateSend(formName) {
      const set = this.$refs;
      if(this.sendForm.logisticsType == 1){
        if(this.sendForm.logisticsCompany == null || this.sendForm.logisticsCompany == ''){
          this.$notify.error({
              title: '请选择快递公司',
              message: '验证提示',
              type: 'error',
              showClose: false,
              duration: 2000
            });
            return false;
        }
        if(this.sendForm.logisticsInt == null || this.sendForm.logisticsInt == ''){
          this.$notify.error({
              title: '请选择快递单号',
              message: '验证提示',
              type: 'error',
              showClose: false,
              duration: 2000
            });
            return false;
        }
      }
      set[formName].validate(valid => {
        if (valid) {
          this.sendDialogFormVisible = false;
          this.sendForm.logisticsStatus = 3;
          sendObj(this.sendForm.orderSn, this.sendForm).then(() => {
            this.sendDialogFormVisible = false;
            this.getList();
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            });
          });
        } else {
          return false;
        }
      });
    },
    resetCancelTemp() {
      this.cancelForm = {
        orderStatus:-2,
        cancelReason: undefined
      };
    },
    resetSendTemp() {
      this.sendForm = {
        orderSn: undefined,
        orderStatus: 4,
        logisticsType:undefined,
        logisticsStatus:3,
        logisticsCompany:'',
        logisticsInt:undefined,
        sendTime:new Date()
      };
    },
    changeLogisticsType(value){
      if(value == 1){
        this.logisticsCompanyVisible = true;
      }else{
        this.logisticsCompanyVisible = false;
      }
    },
    closeSendDialog(){
      this.sendListLoading = false;
    }
  }
}
</script>
<style scoped>
.cancleDialog {
    width: 50%;
  }
.el-row-margin{
  margin-top: 30px;
}
.el-row-margin10{
  margin-top: 10px;
}
.marginLeft100{
  margin-left: -100px;
}
.marginLeft10{
  margin-left: -10px;
}
</style>